<template>
  <div class="xorder-container">
    <Headbar/>
    <HeadMenu hasKeys="yes"/>
    <Hungbar/>
    <div class="yh-layout-box xorder-content">
      <div class="xorder-search-con mt-20">
        <div class="xorder-search-ins">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item style="cursor: pointer"><span>所有结果</span></el-breadcrumb-item>
            <el-breadcrumb-item>
              <el-select v-model="selectXlist" filterable>
                <el-option
                  v-for="item in selectXlists"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span class="xorder-item">
                <input class="xorder-input fl" type="text" v-model="listQuery.templateName" @keyup.enter="getList" placeholder="请输入协议订单模板名称/关键词"/>
                <i class="xorder-searchIco fl cursor" @click="getList">
                  <img src="../../assets/images/search/search_01.png"/>
                </i>
              </span>
            </el-breadcrumb-item>

            <span class="product-total">共 {{ total }} 个订单</span>
          </el-breadcrumb>


        </div>
      </div>

      <div class="search-bar">
        <div class="search-options-ul">
          <div :class="sortByActive == 0?'search-ops-li search-ops-li-active':'search-ops-li'" @click="sortTab(0)">综合排序</div>
          <div :class="sortByActive == 1?'search-ops-li search-ops-li-active':'search-ops-li'" @click="sortTab(1)">最新发布
            <img v-if="sortByActive == 1" src="../../assets/images/search/search_19.png">
            <img v-else src="../../assets/images/search/search_05.png">
          </div>
          <!-- <div :class="sortByActive == 2?'search-ops-li search-ops-li-active':'search-ops-li'" @click="sortTab(2)">新款
          </div> -->
          <div :class="sortByActive == 2?'search-ops-li search-ops-li-active':'search-ops-li'"
               @click="sortByPrice();sortTab(2)">
            价格
            <div :class="'triangle-icon '+ triangleStatus">
              <div class="triangle triangle-up"></div>
              <div class="triangle triangle-bottom"></div>
            </div>
          </div>
          <div :class="activePrice?'search-ops-li price-area out': 'search-ops-li price-area'">
            <div class="shadow">
              价格区间<input class="search_input" v-model="listQuery.minPrice" :min="0" type="number" placeholder="￥最低价">
              - <input class="search_input" v-model="listQuery.maxPrice" :min="0" type="number" placeholder="￥最高价">
              <span class="confirm-btn" @click="getList()">确定</span>
            </div>
          </div>

          <!-- <div class="search-ops-li stockupTime">
            <div class="shadow">
              备货期<input class="search_input" v-model="listQuery.stockupTime" :min="0" type="number" placeholder="">
              <span class="confirm-btn" @click="getList()">确定</span>
            </div>
          </div> -->
        </div>
      </div>

      <div class="xorder-wrap mt-20" v-loading="loading">
        <div class="xorder-ul">
          <router-link :to="{ name: 'SearchXorderDetail', params: {id: item.id} }" class="xorder-list fl mb-20" v-for="(item, idx) in list" :key="idx">
            <div class="xorder-header">
              <span class="xorder-user-img fl"><img :src="URL.PIC+item.factoryLogo"></span>
              <span class="xorder-company fl">{{ item.factoryName }}</span>
              <span class="xorder-label fl"><img src="../../assets/images/search/search_16.png"></span>
              <!-- <span class="xorder-label fl"><img src="../../assets/images/search/search_17.png"></span>
              <span class="xorder-label fl"><img src="../../assets/images/search/search_18.png"></span> -->
              <!-- <span class="ml-10" v-if="item.factoryIsCertified == 1">此信息已认证</span>
              <span class="ml-10" v-else>此信息未认证</span> -->
            </div>
            <div class="xorder-center">
              <div class="xorder-left fl">
                <img src="../../assets/images/search/search_23.png">
              </div>
              <div class="xorder-right fl">
                <p class="xorder-textName">{{ item.templateName }}</p>
                <div class="xorder-msg">
                  <span class="xorder-totalMoney">订单总金额：￥{{ item.amount }}</span>
                  <span class="xorder-time">备货时间：{{ item.stockupTime }}天</span>
                </div>
              </div>
            </div>
            <div class="xorder-footer-item">
              <p class="xorder-footer-content">
                <span class="footer-msg-left">
                  <img src="../../assets/images/search/search_24.png"/>
                  <span class="footer-address">{{ item.factoryAddr }}</span>
                </span>
                <span class="footer-msg-right fr">
                  <!-- {{ fmtDate(item.createTime, 'ymd') }} 发布 -->
                  {{ item.createTime.split(' ')[0] }} 发布 
                </span>
              </p>
            </div>
          </router-link>
        </div>
      </div>
      <null v-if="list && list.length == 0" tips="暂无协议订单哦~" />

      <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size"
                  @pagination="getList"/>
    </div>
    <Footbars/>
  </div>
</template>
<script>
  import Headbar from '@/components/Layouts/Headbar'
  import HeadMenu from '@/components/Layouts/HeadMenu'
  import Hungbar from '@/components/Layouts/Hungbar'
  import Footbars from '@/components/Layouts/Footbars'
  import Pagination from '@/components/Pagination'
  import Null from '@/components/Null'
  import { getOpenListSearch } from '@/api/xorder'

  export default {
    name: 'SearchXorder',
    components: {
      Headbar,
      HeadMenu,
      Hungbar,
      Footbars,
      Pagination,
      Null
    },
    data() {
      return {
        selectXlists: [{
          label: '协议订单',
          value: '1',
        }],
        selectXlist: '1',
        sortByActive: 0,
        total: 0,
        list: null,
        listQuery: {
          page: 1,
          size: 20,
          templateName: null,
          factoryId: null,
          minPrice: null,
          maxPrice: null,
          factoryCertified: null, // 云工厂是否 认证 0：否 1：是
          orderByClause: 'createTime DESC', // 排序条件 updateTime DESC
        },
        loading: false,
        triangleStatus: '',
        triangleNum: 0,
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        getOpenListSearch(this.listQuery).then(res=>{
          setTimeout(()=>{
            this.loading = false
            this.list = res.data.list
            this.total = res.data.total
          }, 300)
        })
      },
      //搜索
      sortTab(index) {
        console.log(index)

        if (this.sortByActive === index) {
          return false;
        }

        this.sortByActive = index;
        if (this.sortByActive !== 2) {
          if (this.sortByActive === 0) {
            this.listQuery.orderByClause = 'createTime';
          } else if (this.sortByActive === 1) {
            this.listQuery.orderByClause = 'createTime DESC';
          } else if (this.sortByActive === 2) {
            console.log(this.triangleStatus)
            if(this.triangleStatus == 'up'){
              this.listQuery.orderByClause = 'amount';
            }else{
              this.listQuery.orderByClause = 'amount DESC';
            }
          }
          this.getList();
        }
      },
      // 搜索价格
      sortByPrice() {
        this.triangleNum++;
        console.log(this.triangleNum)
        if (this.triangleNum === 1) {
          this.triangleStatus = 'up';
          this.listQuery.orderByClause = 'amount DESC';
        } else if (this.triangleNum === 2) {
          this.triangleStatus = 'bottom';
          this.listQuery.orderByClause = 'amount';
        }
        if (this.triangleNum === 3) {
          this.listQuery.orderByClause = '';
          this.triangleStatus = '';
          this.triangleNum = 0;
        }
        this.getList();
      },
    }

}
</script>
<style lang="scss" scoped>
  @import '@/styles/pages/search.scss';
  @import '@/styles/pages/xorderSearch.scss';
  .xorder-header span{
    text-decoration: none;
  }
  .search-bar .search-options-ul .price-area{
    width: 398px
  }
  .search-bar .search-options-ul .stockupTime{
    width: 240px;
  }
  .price-area:hover{
    .shadow{
      position: relative;
      margin-left: -10px;
      margin-right: -70px;
      padding-left: 10px;
      width: 440px;
      -webkit-box-shadow: 1px 1px 6px #aaa;
      box-shadow: 1px 1px 6px #aaa;
      background: #fff;
      z-index: 10;
      .confirm-btn{
        display: inline-block;
        margin-left: 5px;
        padding: 0 15px;
        line-height: 32px;
        border-radius: 3px;
        background: #255B8B;
        color: #fff;
      }
    }
  }
</style>
<style lang="scss">
.xorder-container .pagination-container{
  background: none;
}
.xorder-search-ins{
  .el-breadcrumb__item{
    .el-breadcrumb__inner{
      color: #888;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      // font-size: 12px;
      .el-select{
        .el-input{
          font-size: 12px;
          .el-input__inner{
            height: 32px;
            line-height: 32px;
            width: 120px;
            border: 1px solid #ddd;
            border-radius: 0;
            background: #fafafa;
          }
          .el-input__inner::-webkit-input-placeholder{
            color: #888;
          }
          .el-input__suffix{
            .el-input__icon{
              line-height: 32px;
            }
          }
        }
      }
    }
    .el-breadcrumb__separator{
      height: 32px;
      line-height: 32px;
      vertical-align: top;
    }
  }
  .product-total{
    height: 32px;
    line-height: 32px;
  }
}
</style>
